<template>
    <div class="root">
      <div class="toSelectTime">
            <!-- <el-button type="plain" round style="margin-right: 50px;" @click="updateChart()">年数据</el-button> -->
            <el-button type="plain" round @click="toSelectMonth">月数据</el-button>
             <el-date-picker v-model="selectmonth" type="month" placeholder="选择月" v-show="monthselect" style="position: absolute; right: 49%" @change="changeMonth"></el-date-picker>
      </div>
      <div class="piearea">
          <div class="pie" id="pie"></div>
          <div class="pieOut" id="pieOut">

      </div>
    </div>
        
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: "pie",
    data(){
        return {
            selectmonth:'2024-01',
            totalData:{},
            monthselect:true,
            optionOut : {
                  legend: {
                    top: 'bottom'
                  },
                  title: {
                      text: '入账占比明细'
                        },
                  toolbox: {
                    show: true,
                    feature: {
                      mark: { show: true },
                      dataView: { show: true, readOnly: false },
                      restore: { show: true },
                      saveAsImage: { show: true }
                    }
                  },
                  series: [
                    {
                      name: 'Nightingale Chart',
                      type: 'pie',
                      radius: [50, 250],
                      center: ['50%', '50%'],
                      itemStyle: {
                        borderRadius: 8
                      },
                      data: [
                        { value: 40, name: '转账' },
                        { value: 38, name: '工资' },
                        { value: 32, name: '货款结算' },
                        { value: 30, name: '还款' },
                        { value: 28, name: '奖金' },
                        { value: 22, name: '货款结算' },
                        { value: 18, name: '代收款' }
                      ]
                    }
                  ]
                },
            optionIn: {
              legend: {
                top: 'bottom'
              },
              title: {
                text: '出账占比明细'
              },
              toolbox: {
                show: true,
                feature: {
                  mark: { show: true },
                  dataView: { show: true, readOnly: false },
                  restore: { show: true },
                  saveAsImage: { show: true }
                }
              },
              series: [
                  {
                  name: 'Nightingale Chart',
                  type: 'pie',
                  radius: [50, 250],  
                  center: ['50%', '50%'],
                  itemStyle: {
                    borderRadius: 8
                  },
                  data: [
                    { value: 40, name: '转账' },
                    { value: 38, name: '工资' },
                    { value: 32, name: '货款结算' },
                    { value: 30, name: '还款' },
                    { value: 28, name: '奖金' },
                    { value: 22, name: '货款结算' },
                    { value: 18, name: '代付款' }
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                    
                    }           
                }
              ]
            },
        }

    },
    created(){
        this.$echarts = echarts
        
         
    },
    mounted() {
         this.$nextTick(() => {
            this.initChart();
        });

    },
    methods:{

        initChart(){
            // 基于准备好的dom，初始化echarts实例
            const myChart = this.$echarts.init(document.getElementById('pie'));
            // 绘制图表
            myChart.setOption(this.optionIn,true);

            const myChartOut = this.$echarts.init(document.getElementById('pieOut'));
            // 绘制图表
            myChartOut.setOption(this.optionOut,true);
            
        },
        updateChart(data = undefined){
           if(data != undefined){
              this.totalData = data;
           }
           data = this.totalData;
           this.optionOut.series[0].data= [];
           this.optionIn.series[0].data = [];
           this.optionOut.series[0].data = [
              { value: Math.floor(Math.random() * (20000 - 5000 + 1)) , name: '转账' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1)) , name: '还款' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '奖金' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '货款结算' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '代付款' }
           ]
           this.optionIn.series[0].data = [
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '转账' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '工资' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '还款' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '奖金' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '货款结算' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '代收款' }
           ]
           const myChart = this.$echarts.init(document.getElementById('pie'));
            // 绘制图表
            myChart.setOption(this.optionIn,true);

            const myChartOut = this.$echarts.init(document.getElementById('pieOut'));
            // 绘制图表
            myChartOut.setOption(this.optionOut,true);
 

        },
        toSelectMonth(){
           this.monthselect = true;
        },
        changeMonth(){
          this.optionOut.series[0].data= [];
           this.optionIn.series[0].data = [];
           this.optionOut.series[0].data = [
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '转账' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '工资' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '还款' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '奖金' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '货款结算' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '代收款' }
           ]
           this.optionIn.series[0].data = [
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '转账' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '工资' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '还款' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '奖金' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1))  , name: '货款结算' },
              { value: Math.floor(Math.random() * (20000 - 5000 + 1)) , name: '代收款' }
           ]
           const myChart = this.$echarts.init(document.getElementById('pie'));
            // 绘制图表
            myChart.setOption(this.optionIn,true);

            const myChartOut = this.$echarts.init(document.getElementById('pieOut'));
            // 绘制图表
            myChartOut.setOption(this.optionOut,true);
        },
        selectmonth(){

        }
    }
}
</script>

<style scoped>
.root{
        width: 100%;
        height:  100%;
        display: flex;
        flex-direction: column;
}
.toSelectTime {
  margin-bottom: 30px;
}
.pie{
    width: 100%;
    height:  100%;
}
.pieOut{
    width: 100%;
    height:  100%;
}
.piearea {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}
    
        
</style>

